<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../lib/include-openlayers-local.js"></script>
    <script src='https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js'></script>
    <script src="../lib/map.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100vh;
        }

        #download {
            position: fixed;
            right: 10px;
            top: 30px;
            border: none;
            border-radius: 5px;
            font-size: 24px;
            color: aliceblue;
            background-color: rgb(132, 0, 255);
            z-index: 10000;
            padding: 10px;
        }
    </style>
</head>

<body>
    <button id="download">pdf下载</button>
    <div id="map"></div>
    <script>
        /* 设置导航控件 */
        /* 3、使用ol加载影像图层 */
        // 实例化中地图层
        var docLayer = new Zondy.Map.Doc('', '城市', {
            ip: 'localhost',
            port: 6163,
            // 加上跨域参数才可以下载
            crossOrigin: "Anonymous"
        })
        const map = new ol.Map({
            target: 'map',
            layers: [gaodeMapLayer, docLayer],
            view: new ol.View({
                center: [114, 30],
                zoom: 8,
                projection: "EPSG:4326"
            })
        })
        window.jsPDF = window.jspdf.jsPDF;
        /* 地图的下载 */
        document.getElementById('download').addEventListener('click', function () {
            var dim = [1189, 841]
            map.once('postcompose', function (event) {
                var canvas = event.context.canvas;
                var data = canvas.toDataURL('image/jpeg');
                var pdf = new jsPDF('landscape', undefined, 'A1');
                pdf.addImage(data, 'JPEG', 0, 0, dim[0], dim[1]);
                pdf.save('map.pdf');
            });
            console.log(dim[0]);
            console.log(dim[1]);
            map.renderSync();
        });
    </script>
</body>

</html>